<template>
  <el-form ref="form" class="reserve-item" :disabled="disabled" :model="value" v-bind="config__" :rules="rulers">
    <i class="el-icon-close close" @click="$emit('close')" />
    <p style="text-align: center;">场次{{ index + 1 }}</p>
    <el-form-item label="场次时间：" required>
      <el-row>
        <el-col :span="11">
          <el-form-item prop="beginTime" verify>
            <el-time-picker
              style="width: 100%;"
              v-model="value.beginTime"
              format="HH:mm"
              value-format="HH:mm"
              :picker-options="{
                selectableRange: '00:00:00 - 23:59:59'
              }"
              placeholder="开始时间"
            >
            </el-time-picker>
          </el-form-item>
        </el-col>
        <el-col :span="2" style="text-align: center">-</el-col>
        <el-col :span="11">
          <el-form-item prop="endTime" verify>
            <el-time-picker
              style="width: 100%;"
              v-model="value.endTime"
              format="HH:mm"
              value-format="HH:mm"
              :picker-options="{
                selectableRange: '00:00:00 - 23:59:59'
              }"
              placeholder="结束时间"
              @change="$refs.form.validateField('beginTime')"
            >
            </el-time-picker>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form-item>
    <el-form-item label="场次库存：" prop="limitNum">
      <SafeInputNumber style="width: 100%" v-model="value.limitNum" :min="1" :max="1000000" placeholder="范围在1 ~ 1000000之间" />
    </el-form-item>
    <el-form-item label="场次可使用日：" prop="canUseDays">
      <week-tag :disabled="disabled" v-model="value.canUseDays" />
    </el-form-item>
    <el-form-item label="不可使用日：" prop="unavailableDates">
      <el-date-picker
        style="width: 100%"
        v-model="getUnavailableDates"
        type="dates"
        value-format="yyyy-MM-dd"
        placeholder="请选择场次不可使用日期"
        :picker-options="{ disabledDate: time => $dayjs(time).isBefore($dayjs().format('YYYY-MM-DD')) }"
      />
    </el-form-item>
  </el-form>
</template>

<script>
import WeekTag from '../weekTag.vue'

export default {
  components: { WeekTag },
  props: {
    index: {
      type: Number,
      default: 0
    },
    value: {
      type: Object,
      default: _ => {}
    },
    disabled: {
      type: Boolean,
      default: false
    },
    // 库存策略 - 包含库存模式， 日限量库存， 总限量库存三个字段。
    // a. 无限库存 - 将不对场次库存做限制
    // b. 日限量库存 - 每一场次不能超过日限量库存
    // c. 总限量库存 - 所有场次相加不得超过总限量库存
    // d. 日限量库存 + 总限量库存 - 每一场次不能超过日限量库存，所有场次相加不得超过总限量库存
    stockStrategy: {
      type: Object,
      default: _ => {}
    }
  },
  data () {
    return {
      data__: {},
      config__: {
        size: 'mini',
        labelWidth: "120px"
      },
      rulers: {
        beginTime: [
          { required: true, message: '请选择场次开始时间', trigger: 'blur' },
          {
            validator: (rule, value, callback) => {
              if (!this.value.endTime) return callback()
              const now = this.$dayjs().format('YYYY-MM-DD')
              const beginTime = this.$dayjs(`${now} ${this.value.beginTime}`).format('YYYY-MM-DD HH:mm')
              const endTime = this.$dayjs(`${now} ${this.value.endTime}`).format('YYYY-MM-DD HH:mm')
              if (this.$dayjs(beginTime).isAfter(endTime)) {
                return callback(new Error('开始时间不能晚于结束时间!'))
              }
              return callback()
            }
          }
        ],
        endTime: [
          { required: true, message: '请选择场次结束时间', trigger: 'blur' },
        ],
        limitNum: [
          { required: true, message: '请填写场次库存', trigger: 'blur' },
          {
            trigger: 'change',
            validator: (rule, value, callback) => {
              // 1. 判断策略模式
              if (this.stockStrategy.repertoryType === null || this.stockStrategy.repertoryType === undefined) {
                return callback(new Error('请先选择库存模式'))
              }

              // 2. 日限量库存
              if (this.stockStrategy.repertoryType === 2) {
                if (this.stockStrategy.stockDayNum < value) {
                  return callback(new Error('日限量库存模式下，每个场次库存不能超过日限量库存'))
                }
              }

              // 3. 总限量库存 + 日限量库存
              if (this.stockStrategy.repertoryType === 3) {
                if (this.stockStrategy.stockDayNum < value || this.stockStrategy.productTotal < value) {
                  return callback(new Error('总限量库存 + 日限量库存模式下，每个场次库存不能超过日限量库存和总限量库存'))
                }
              }

              callback()
            }
          }
        ],
        canUseDays: [
          { required: true, message: '场次可用日期至少选择一个', trigger: 'blur' },
        ]
      }
    }
  },
  computed: {
    // 规则：超出当前日期的时间需要被清除
    getUnavailableDates: {
      get () {
        if (!this.value.unavailableDates) return null
        const now = this.$dayjs().format('YYYY-MM-DD')
        return this.value.unavailableDates.filter(time => this.$dayjs(time).isSameOrAfter(now))
      },
      set (val) {
        this.$set(this.value, 'unavailableDates', val)
      }
    }
  }
}
</script>

<style scoped>
  .el-form {
    border: 1px dotted #909399;
    padding: 0 20px;
    border-radius: 5px;
    position: relative;
  }

  .close {
    position: absolute;
    top: 10px;
    right: 10px;
    transition: all ease .5s;
  }
  .close:hover {
    transform: scale(1.3);
  }
</style>
